iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
1
自我挑戰組

vue.js 30天學習軌跡系列 第 19

Day19 vue.js - props(4)

  • 分享至 

  • xImage
  •  

單向數據流(One-Way Data Flow)

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定:
父級 prop 的更新會向下流動到子組件中,但是反過來則不行。
這樣會防止從子組件意外改變父級組件的狀態,從而導致你的應用的數據流向難以理解。

額外的,每次父級組件發生更新時,子組件中所有的 prop 都將會刷新為最新的值。
這意味著你不應該在一個子組件內部改變 prop
如果你這樣做了,Vue 會在瀏覽器的控制台中發出警告。

這是一個會造成錯誤的範例

當你改動畫面中input 的值的時候,Vue 會在瀏覽器的控制台發出警告。

<div id="app">
  <h2>單向數據流</h2>
  <child :child-data="papadata"></child>
</div>
Vue.component('child', {
  props: ['childData'],
  template: '<div><input type="text" class="form-control" v-model="childData"></div>',
})

var app = new Vue({
  el: '#app',
  data: {    
    papadata: '我是papa的資料',    
  },
});
</script>

控制台的警告

解決方法

使用function return並新建一個變數,來接父級傳來的props,因此可避免與父級的資料綁定。

Vue.component('child', {
  props: ['childData'],
  template: '<div><input type="text" class="form-control" v-model="newData"></div>',
  data(){
    return {
      newData: this.childData
    }
  }
})

/images/emoticon/emoticon08.gif


上一篇
Day18 vue.js - props(3)
下一篇
Day20 vue.js - 使用 $emit 向外傳遞
系列文
vue.js 30天學習軌跡30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言